/**
   * for 速度快，写起来稍微麻烦一点
   * forEach 速度慢，写起来复杂程度与 map 相同，与 map 不同的是，无返回值
   * map 速度慢，写起来复杂程度与 forEach 相同，与 forEach 不同的是，会返回一个长度与所遍历数组长度相同的数组（数组的值由返回值决定，如果没有返回值，就是一组 undefined，否则是每次返回的值组成的数组）
   * filter 过滤，返回值为符合条件的新数组
   * 对象遍历
   */

import { useState, useEffect, Fragment } from 'react'
import './index.less'

const RenderTabItem = (props: any) => {

  const {
    tableParams: {
      row = 0,
      col = 0,
      result = []
    }
  } = props

  const [_row, setRow] = useState(row)
  const [_col, setCol] = useState(col)

  useEffect(() => {
    setRow(row)
    setCol(col)
  }, [JSON.stringify(result)])

  return <>{
    Array(_row).fill(undefined).map((_, rowIndex: number) => {
      return Array(_col).fill(undefined).map((_, colIndex: number) => {
        return colIndex <= rowIndex ? 
        <Fragment key={`${colIndex}-${rowIndex}`}>
          <span className='table-cell'>{result?.[colIndex]?.[rowIndex]}</span>
          {colIndex == rowIndex ?<br /> : null}
        </Fragment> : null
      })
    })
  }</>
}
export default RenderTabItem